<template>
  <div class="code-box">
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode1">
        <div class="public-title-bold">地图组件</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div v-show="islook1" style="height: 100vh;">
        <mapDemo :lnglat="[120.619585, 31.299379]"></mapDemo>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode5">
        <div class="public-title-bold">备注</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook5">
        <v-md-preview :text="notes" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode2">
        <div class="public-title-bold">地图组件代码展示Html</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook2">
        <v-md-preview :text="mapNormhtmlHtml" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode3">
        <div class="public-title-bold">地图组件代码展示css</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook3">
        <v-md-preview :text="mapNormhtmlCss" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode4">
        <div class="public-title-bold">地图组件代码展示typeScript</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook4">
        <v-md-preview :text="mapNormhtmlTypeScript" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import mapDemo from '@/components/map/index.vue'
import mapNormhtmlHtml from './mapNormhtmlHtml.md?raw'
import mapNormhtmlCss from './mapNormhtmlCss.md?raw'
import mapNormhtmlTypeScript from './mapNormhtmlTypeScript.md?raw'
import notes from './notes.md?raw'


const imgsrc1 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);
let islook1 = ref(true);
const lookCode1 = () => {
  islook1.value = !islook1.value
}
let islook2 = ref(false);
const lookCode2 = () => {
  islook2.value = !islook2.value
}
let islook3 = ref(false);
const lookCode3 = () => {
  islook3.value = !islook3.value
}
let islook4 = ref(false);
const lookCode4 = () => {
  islook4.value = !islook4.value
}
let islook5 = ref(false);
const lookCode5 = () => {
  islook5.value = !islook5.value
}

</script>

<style lang="scss" scoped>
.code-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

// .public-flex-box{
//   height: 100%;
// }
</style>